<template>
	<view class="content">
		
		<view class="box">
			<view class="cu-bar bg-yellow justify-center">
				<view class="col-1 flex">
					
					<view class="flex-sub text-black text-lg text-con">
						<view class="text-white balance flex">金币余额<text >{{userInfo.gold_balance}}</text></view>
						<view class="text-grey text-df flex">
							<text class="text-red"> </text>
						</view>
						<view class="log flex margin-top">
							<view class="text-black padding text-center getTotal" @tap="goPage('/pages/tabbar/tabbar-4/goldGot')">累计获取＞<br><br><text class="text-lg">{{userInfo.gold_total}}</text></view>
							<view class="text-black useTotal padding text-center"  @tap="goPage('/pages/tabbar/tabbar-4/goldUsed')">累计消费＞<br><br><text class="text-lg">{{userInfo.gold_total-userInfo.gold_balance}}</text></view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="row text-gray  margin-lr flex justify-between"></view>
		<scroll-view :style="{
				height:scrollHeight
			}"
			class="list-scroll-content" 
			scroll-y
			@scrolltolower="loadData"
		>
			<!-- 空白页 -->
			<!-- <empty v-if="tabItem.loaded === true && tabItem.orderList.length === 0"></empty> -->
			
			<view class="cu-list menu-avatar padding-top">
				
				<view class="cu-item " v-for="(itemList,indexList) in tableList" :key="indexList" >
					<view class="itcontent">
						<view class="date">{{itemList.date}}</view>
						<view class="col-1 flex">
							
							<view class="flex-sub text-black text-lg text-conf ">
								<view class="text-grey text-df flex justify-between"  v-for="(item,index) in itemList.list" :key="index">
									<view class="">{{item.desc}}</view>
									<text class="gold-get" v-if="item.type==1">+{{item.gold}}</text>
									<text class="gold-use" v-else >-{{item.gold}}</text>
								</view>
							</view>
						</view>
					</view>
					
				</view>
			</view>
			 
			<!-- <uni-load-more :status="tabItem.loadingType"></uni-load-more> -->
			
		</scroll-view>
		<!-- <view class="bottom bg-white">
			<view class="bg-red text-white round cu-btn" @tap="showModal" data-target="Modal">金币充值</view>
		</view> -->
		<view class="cu-modal" :class="modalName=='Modal'?'show':''"  @tap="hideModal">
			<view class="cu-dialog" @tap.stop="" >
				<view class="cu-title">金币充值</view>
				<view class=" bg-white justify-center flex money-btn  flex-wrap">
					<view class="cu-btn radius text-black basis-xs" :class="money==6? 'selectMoney':''" @tap="changeMoney(6)">6个</view>
					<view class="cu-btn radius text-black basis-xs" :class="money==18? 'selectMoney':''" @tap="changeMoney(18)">18个</view>
					<view class="cu-btn radius text-black basis-xs" :class="money==25? 'selectMoney':''" @tap="changeMoney(25)">25个</view>
					<view class="cu-btn radius text-black basis-xs" :class="money==50? 'selectMoney':''" @tap="changeMoney(50)">50个</view>
					<view class="cu-btn radius text-black basis-xs" :class="money==100? 'selectMoney':''" @tap="changeMoney(100)">100个</view>
					<view class="cu-btn radius text-black basis-xs" :class="money==200? 'selectMoney':''" @tap="changeMoney(200)">200个</view>
				</view>
				<view class=" text-left bg-white">
		
					<view class="cu-form-group flex justify-between">
						<text class="tit">充值金币(￥):</text>
						<input class="input text-right" type="text" :maxlength="20" v-model="money" placeholder="请输入..." placeholder-class="placeholder" />
					</view>
					<view class="pay-type-list">
						
						<view class="type-item " @click="changePayType(3)">
							<text class="icon yticon icon-weixinzhifu"></text>
							<view class="con">
								<text class="tit">微信支付</text>
							</view>
							<label class="radio">
								<radio value="" color="#4CA5FE" :checked='payType == 3' />
								</radio>
							</label>
						</view>
						<view class="type-item " @click="changePayType(4)">
							<text class="icon yticon icon-alipay"></text>
							<view class="con">
								<text class="tit">支付宝支付</text>
							</view>
							<label class="radio">
								<radio value="" color="#4CA5FE" :checked='payType == 4' />
								</radio>
							</label>
						</view>
					</view>
					<view class="cu-form-group justify-center"  @click="confirm">
						<view class="round bg-red sure-btn">确认充值</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template> 

<script>
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	import empty from "@/components/empty";
	export default {
		components: {
			uniLoadMore,
			empty
		},
		data() {
			return {
				tabCurrentIndex: 0,
				navList: [{
						state: 0,
						text: '未处理',
						loadingType: 'more',
						orderList: []
					},
					{
						state: 1,
						text: '已拒绝',
						loadingType: 'more',
						orderList: []
					},
					{
						state: 2,
						text: '已同意',
						loadingType: 'more',
						orderList: []
					},
				
				],
				modalName: null,
				money:6,
				payType:3,
				phone:'',
				qStart:'请选择',
				scrollHeight:'460px',
				loadingType:'',
				uId:'',
				page:1,
				tableList:[],
				userInfo:{},
			};
		},
		
		onLoad(options){
			/**
			 * 修复app端点击除全部订单外的按钮进入时不加载数据的问题
			 * 替换onLoad下代码即可
			 */
			// this.tabCurrentIndex = +options.state;
			// // #ifndef MP
			// this.loadData()
			// // #endif
			// // #ifdef MP
			// if(options.state == 0){
			// 	this.loadData()
			// }
			// // #endif
			this.uId = uni.getStorageSync('userId');
			this.userInfo = uni.getStorageSync('userInfo');
			let obj = uni.getSystemInfoSync();
			let clientHeight = obj.screenHeight;
			this.scrollHeight = clientHeight-320+'px';
			console.log(this.scrollHeight);
			this.loadData('refush');
		},
		 
		methods: {
			//获取列表
			async loadData(type='add'){
				
				if(this.loadingType === 'loading'){
					//防止重复加载
					return;
				}
				//没有更多直接返回
				if(type === 'add'){
					if(this.loadingType === 'noMore'){
						return;
					}
					
				}
					
				this.loadingType = 'loading';
				let param = {
					user_id:this.uId,
					// cate_id:this.cateId,
					page:this.page,
					// type:2,
					limit:5,
					};
				let that = this;
				let data = await this.$http.post(
					'userGoldList', //可以直接放链接(将不启用全局定义域名)
					param, 
				);
				console.log(data);
				if(data.last_page<=that.page){
					this.loadingType = 'noMore';
				}
				else{
					this.loadingType = 'more';
				}
				that.tableList=that.tableList.concat(data.data)
				// that.tableList.push(data.data);
				// that.$set(navItem, 'loaded', true);
				that.page++;
				// setTimeout(()=>{
					
				// 	this.$set(navItem, 'loaded', true);
					
				// 	//判断是否还有数据， 有改为 more， 没有改为noMore 
				// 	navItem.loadingType = 'more';
				// }, 600);	
			},  
			DateChange(e) {
				this.qStart = e.detail.value
			},
			//选择支付方式
			changePayType(type) {
				this.payType = type;
			},
			goPage(page){
				uni.navigateTo({
					url:page
				})
			},
			changeMoney(money){
				this.money = money;
			},
			showModal(e) {
				this.modalName = e.currentTarget.dataset.target
			},
			hideModal(e) {
				this.modalName = null
			},
			//确认支付
			confirm: async function() {
				// uni.redirectTo({
				// 	url: '/pages/money/paySuccess'
				// })
				this.$api.msg('购买成功');
				this.hideModal();
			},
			//swiper 切换
			changeTab(e){
				this.tabCurrentIndex = e.target.current;
				this.loadData('tabChange');
			},
			//顶部tab点击
			tabClick(index){
				this.tabCurrentIndex = index;
				console.log(index)
			},
			// ListTouch触摸开始
			ListTouchStart(e) {
				this.listTouchStart = e.touches[0].pageX
			},
			
			// ListTouch计算方向
			ListTouchMove(e) {
				this.listTouchDirection = e.touches[0].pageX - this.listTouchStart > 0 ? 'right' : 'left'
			},
			
			// ListTouch计算滚动
			ListTouchEnd(e) {
				if (this.listTouchDirection == 'left') {
					this.modalName = e.currentTarget.dataset.target
				} else {
					this.modalName = null
				}
				this.listTouchDirection = null
			}
		},
	}
</script>

<style lang="scss">
	page{
		background: $page-color-base;
		// height: 100Vh;
		width: 100vw;
	}
	page, .content{
		background: $page-color-base;
		// height: 100%;
		.cu-bar{
			height: 500upx;
			background: url(../../../static/images/jinb@3x.png) no-repeat;
			// background-color: #FED961;
			background-size: cover;
			background-position:0px -44px;
		}
		.balance{
			font-size: 20px;
			top: -60px;
			position: relative;
			width: 100%;
			margin: 0;
			padding: 0 15px;
			line-height: 26px;
			justify-content: space-between;
		}
		.getTotal{
			top: 55px;
			font-size: 16px;
			left: -60px;
			color: #C1D4E5;
			position: relative;
		}
		.useTotal{
			top: 55px;
			font-size: 16px;
			left: 60px;
			color: #C1D4E5;
			position: relative;
		}
		.gold-get{
			color: #FE4C4C;
		}
		.gold-use{
			color: #26CC0C;
		}
		.cu-modal{
			z-index: 99;
			.cu-title{
				height: 40px;
				font-size: 18px;
				color: #FFFFFF;
				line-height: 40px;
				background: #F2B900;
			}
			.sure-btn{
				width: 90%;
				height: 44px;
				text-align: center;
				line-height: 40px;
			}
			.money-btn{
				.basis-xs{
					-webkit-flex-basis: 30%;
					flex-basis: 30%;
				}
			}
			.cu-btn{
				height: 50px;
				margin: 5px;
			}
			.selectMoney{
				color:#FF4400;
				background: #FFFFFF;
				border: 1px solid #FF4400;
			}
		}
		.username{
			width: 70px;
			text-align: center;
		}
		.bottom{
			position: fixed;
			bottom: 0;
			width: 100%;
			.cu-btn{
				width: 90%;
				margin: 5px 5% ;
				height: 44px;
			}
		}
	}
	.text-conf{
		.text-df{
			height: 30px;
			border-bottom: 1upx solid #ccc;
		}
	}
	.tit{
		flex-shrink: 0;
		width: 200upx;
		font-size: 28upx;
		color: $font-color-dark;
	}
	.pay-type-list {
		
		background-color: #fff;
		padding-left: 40upx;
		
		.type-item{
			height: 80upx;
			padding-top: 10upx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-right: 40upx;
			font-size: 30upx;
			border: 0 !important;
			position:relative;
		}
		
		.icon{
			width: 100upx;
			font-size: 52upx;
		}
		.icon-erjiye-yucunkuan {
			color: #fe8e2e;
		}
		.icon-weixinzhifu {
			color: #36cb59;
		}
		.icon-alipay {
			color: #01aaef;
		}
		.tit{
			font-size: 28upx;
			color: $font-color-dark;
			margin-bottom: 4upx;
		}
		.con{
			flex: 1;
			display: flex;
			flex-direction: column;
			font-size: $font-sm;
			color: $font-color-light;
		}
	}
	.swiper-box{
		height: calc(100% - 40px);
	}
	.list-scroll-content{
		// height: 100%;
		// margin-bottom: 50px;
	}
	
	.search{
		padding: 0 20px;
	}
	
	.uni-swiper-item{
		height: auto;
	}
	
	.cu-list>.cu-item.move-cur {
		transform: translateX(-80upx)
	}
	.cu-list>.cu-item .move {
		right: 5px;
		width: 80upx;
	}
	
	.cu-list.menu-avatar {
		margin: 15px;
		padding-top: 20px;
	}
	.company-img{
		width: 64px;
		height: 64px;
		border-radius: 50%;
	}
	.cu-item{
		padding: 0 !important;
		height: auto !important;
		background-color: #F2F6F8 !important;
		margin-bottom: 30px !important;
		
	}
	.cu-list.menu-avatar>.cu-item .itcontent {
		width: 100%;
		line-height: 1.6em;
		left: 1px;
		background: #FFF;
		z-index: 10;
		border-radius: 10px;
		padding: 5px 10px;
		.date{
			position: absolute;
			top:-40upx;
		}
	}
	
	.text-white{
		margin: 0px 15px;
		font-size: 14px;
		text-align: center;
	}
	
	.radius{
		border-radius: 10px;
	}
	
	.line{
		border-bottom: 1px solid rgba(76,165,254,1);
		line-height: 20px;
	}
	
	.bg-red {
		background-color: #FF4400;
	}
	.text-info{
		width: 200px;
		height: 20px;
		line-height: 25px;
		overflow: hidden;
	}
	
	.recom-date{
		right: 10px;
		top: 20px;
		position: absolute;
		width: 90px;
		text-align: center;
	}
	.text-title{
		font-size: 16px !important;
		font-weight: bold;
	}
	
	.state{
		// width: 90px;
		font-size: 14px;
		height: 26px;
		line-height: 26px;
		margin-bottom: 10px;
	}
	.auth{
		width: 180upx;
		height: 26px;
		font-size: 28upx;
		background-color: #57F2EE;
		line-height: 26px;
		color: #FFFFFF;
	}
	.col-1{
		justify-content: space-between;
		.text-red{
			font-size: 32upx;
		}
		.left-line{
			border-right: 3px solid #F1F4F9;
		}
		.log{
			width: 300px;
			.text-black{
				width: 150px;
			}
		}
	}
	.agree{
		width: 100px;
		height: 28px;
		background-color: #4CA5FE !important;
		color: #FFF;
		right: 10px;
		bottom: 10px;
		position: absolute;
	}
	.reward{
		color: #FF4400;
		font-size: 20px;
		font-weight:bold;
		top: -25px;
		position: relative;
	}
	/* load-more */
	.uni-load-more {
		display: flex;
		flex-direction: row;
		height: 80upx;
		align-items: center;
		justify-content: center
	}
	
	.uni-load-more__text {
		font-size: 28upx;
		color: #999
	}
	
	.uni-load-more__img {
		height: 24px;
		width: 24px;
		margin-right: 10px
	}
	
	.uni-load-more__img>view {
		position: absolute
	}
	
	.uni-load-more__img>view view {
		width: 6px;
		height: 2px;
		border-top-left-radius: 1px;
		border-bottom-left-radius: 1px;
		background: #999;
		position: absolute;
		opacity: .2;
		transform-origin: 50%;
		animation: load 1.56s ease infinite
	}
	
	.uni-load-more__img>view view:nth-child(1) {
		transform: rotate(90deg);
		top: 2px;
		left: 9px
	}
	
	.uni-load-more__img>view view:nth-child(2) {
		transform: rotate(180deg);
		top: 11px;
		right: 0
	}
	
	.uni-load-more__img>view view:nth-child(3) {
		transform: rotate(270deg);
		bottom: 2px;
		left: 9px
	}
	
	.uni-load-more__img>view view:nth-child(4) {
		top: 11px;
		left: 0
	}
	
	.load1,
	.load2,
	.load3 {
		height: 24px;
		width: 24px
	}
	
	.load2 {
		transform: rotate(30deg)
	}
	
	.load3 {
		transform: rotate(60deg)
	}
	
	.load1 view:nth-child(1) {
		animation-delay: 0s
	}
	
	.load2 view:nth-child(1) {
		animation-delay: .13s
	}
	
	.load3 view:nth-child(1) {
		animation-delay: .26s
	}
	
	.load1 view:nth-child(2) {
		animation-delay: .39s
	}
	
	.load2 view:nth-child(2) {
		animation-delay: .52s
	}
	
	.load3 view:nth-child(2) {
		animation-delay: .65s
	}
	
	.load1 view:nth-child(3) {
		animation-delay: .78s
	}
	
	.load2 view:nth-child(3) {
		animation-delay: .91s
	}
	
	.load3 view:nth-child(3) {
		animation-delay: 1.04s
	}
	
	.load1 view:nth-child(4) {
		animation-delay: 1.17s
	}
	
	.load2 view:nth-child(4) {
		animation-delay: 1.3s
	}
	
	.load3 view:nth-child(4) {
		animation-delay: 1.43s
	}
	
	@-webkit-keyframes load {
		0% {
			opacity: 1
		}
	
		100% {
			opacity: .2
		}
	}
</style>
